<template>
  <div id="progress">
    <el-row type="flex" class="" justify="center">
      <el-col :span="23" class="line">
        <i class="el-icon-time"></i>进度查询
      </el-col>
    </el-row>
    <div class="content" v-loading.fullscreen.lock="fullscreenLoading"
              element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)">
      <el-card class="box-card">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="ticket"
            label="报名号"
            align="center">
          </el-table-column>
          <el-table-column
            prop="type"
            label="报考项目"
            align="center">
          </el-table-column>
          <el-table-column
            prop="create_time"
            label="报名时间"
            align="center">
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            align="center">
          </el-table-column>
          <el-table-column
            label="操作"
            align="center">
            <template slot-scope="scope">
               <el-button type="primary" size="mini" @click="gotoDetail(scope.row)">查看详情</el-button>
              <!--  <el-button size="mini" @click="showBmback(scope.row)" v-show="scope.row.isShow">申请驳回</el-button> -->
              <!--  <el-button size="mini" @click="showSelf(scope.row)" v-show="scope.row.isSelfShow">上传自述</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
<!-- 模态框 -->
    <!-- 驳回理由 -->
    <el-dialog title="填写理由" :visible.sync="dialogFormVisible">
        <el-form>
          <el-form-item label="申请理由" :label-width="formLabelWidth">
            <el-input v-model="reason" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="bmback">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 自述报告 -->
    <el-dialog title="填写自述报告" :visible.sync="dialogFormVisible1" :close-on-click-modal="false">
        <el-form>
          <textarea placeholder="请输入内容" class="layui-textarea" v-model="account"></textarea>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="selfAccount('save')">保 存</el-button>
          <el-button type="primary" @click="selfAccount('submit')">提 交</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
  import VDistpicker from 'v-distpicker'
  export default {

    data() {
      return {
        value:'',
        fullscreenLoading:false,
        tableData: [],
        reason:'',
        reasonId:'',
        dialogFormVisible:false,
        dialogFormVisible1:false,
        formLabelWidth: '85px',
        account:'',
        accountId:'',
        ticket:''
        
      }
    },
    components: {
      VDistpicker
    },
    mounted(){
      this.fullscreenLoading=true;
      this.getInfo();
    },
    methods: {
      getInfo(){
        var that=this;
        this.axios({
          url:this.host+'/3v1t.smserver.cn/index.php/index/student.Progress/all_entry',
          method:'post',
          headers:{
                "Content-type":"application/json"
          }
        }).then((res)=>{
          console.log(res);
          that.fullscreenLoading=false;
          var data=res.data.data;
          data.forEach((item)=>{
            if(item.status.code==1){
              item.state=item.step.name;
              if(item.step.code==3){
                item.isSelfShow=true;
              }else{
                item.isSelfShow=false;
              }
            }else{
              item.state=item.status.name;
            }
            if(item.type=="01"){
              item.type="三位一体"
            }else{
              item.type="高水平运动员"
            }
            if((item.isreject==1&&item.status.code==1)&&(item.step.code==1 || item.step.code==2)){
              item.isShow=true;
            }else{
              item.isShow=false;
              if(item.isreject==2){
                item.state+='(已申请驳回)'
              }else if(item.isreject==3){
                item.state+='(申请未通过)'
              }
            }
          })
          that.tableData=data;
        })
      },
      gotoDetail(mess){
        this.$router.push({
            path: '/userHome/progressDetail', 
            query: { id: mess.id}
            /*query: {
                name: 'name', 
                dataObj: this.msg
            }*/
        })
        //this.$router.push('/userHome/progressDetail')
      },
      showBmback(mess){
        this.reasonId=mess.id;
        this.dialogFormVisible=true;
      },
      bmback(){
        var that=this;
        var  message={
          id:this.reasonId,
          content:this.reason
        };
        if(this.reason==""){
          this.$message({
            type:'warning',
            message:'申请理由不能为空'
          })
        }else{
          this.axios({
            url:this.host+'/3v1t.smserver.cn/index.php/index/student.Progress/bmback',
              data:JSON.stringify(message),
            method:'post',
            headers:{
                  "Content-type":"application/json"
            }
          }).then((res)=>{
            console.log(res);
            that.fullscreenLoading=false;
            if(res.data.code==1){
              that.getInfo();
              that.dialogFormVisible=false;
                that.$message({
                  type:'success',
                  message:''+res.data.msg
                })
              } 
              else if(res.data.code==2){
                that.$message({
                      type:'warning',
                      message:''+res.data.msg
                 })
              }
          })
        }
      },
      showSelf(mess){
        //this.reasonId=mess.id;
        var that=this;
        this.ticket=mess.ticket;
        this.fullscreenLoading=true;
        this.axios({
            url:this.host+'/3v1t.smserver.cn/index.php/index/student.progress/get_report',
            method:'post',
            data:JSON.stringify({ticket:mess.ticket}),
            headers:{
                  "Content-type":"application/json"
            }
        }).then((res)=>{
            console.log(res);
            that.fullscreenLoading=false;
            if(res.data.code==1){
              that.account=res.data.data.content;   
            } 
            else if(res.data.code==2){
              that.$message({
                type:'warning',
                message:''+res.data.msg
              })
            }
        })
        this.dialogFormVisible1=true;
      },
      submitAccount(message){
        var that=this;
        this.fullscreenLoading=true;
        this.axios({
            url:this.host+'/3v1t.smserver.cn/index.php/index/student.progress/report',
            data:JSON.stringify(message),
            method:'post',
            headers:{
                  "Content-type":"application/json"
            }
        }).then((res)=>{
            console.log(res);
            that.fullscreenLoading=false;
            if(res.data.code==1){
              //that.getInfo();
              that.dialogFormVisible1=false;
                that.$message({
                  type:'success',
                  message:''+res.data.msg
                })
              } 
              else if(res.data.code==2){
                that.$message({
                      type:'warning',
                      message:''+res.data.msg
                 })
              }
        })
      },
      selfAccount(type){
        var that=this;
        if(type=="save"){
          var message={
            stype:1,
            con:this.account,
            ticket:this.ticket
          }; 
          this.submitAccount(message)
        }else{
          this.$confirm('提交后报告不能再更改，是否继续提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var message={
              stype:2,
              con:this.account,
              ticket:this.ticket
            }; 
            this.submitAccount(message)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消提交'
            });          
          });
        } 
      },
      changeTable(data){
        console.log(data);
        var that=this;
        if(data=="三位一体"){
          this.axios({
            url:this.host+'/3v1t.smserver.cn/index.php/index/student.Progress/all_entry',
            method:'post',
            headers:{
                  "Content-type":"application/json"
            }
          }).then((res)=>{
            console.log(res);
            if(res.data.code==2){
              that.$message({
                type:'warning',
                message:''+res.data.msg
              })
            } 
          })
        }else if(data=="高水平运动员"){
          this.axios({
            url:this.host+'/3v1t.smserver.cn/index.php/index/student.Download/pdf_zxs',
            method:'post',
            headers:{
                  "Content-type":"application/json"
            }
          }).then((res)=>{
            if(res.data.code==2){
              that.$message({
                type:'warning',
                message:''+res.data.msg
              })
            }   
          })
        }
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  #progress {
    //width:100%;
    //line-height:100%;
    padding: 10px;
    .line {
      border-bottom: 1px solid #ccc;
      text-align: left;
      height: 50px;
      line-height: 50px;
      padding-left: 10px;
    }
    .content {
      padding: 20px;
      text-align: center;
    }
    .el-dialog__footer{
      text-align:center;
    }
    .layui-textarea{
      min-height:200px;
    }
  }

</style>
